<script setup>
import {uploadPayImg, sponsor} from "@/apis/v1/sponsor/sponsor.js";
import {useWebInfo} from "@/store/webinfo.js";
import {UploadFilled} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const webInfoStore = useWebInfo();
const {webInfo} = webInfoStore;
const BASE_IMG_URL = import.meta.env.VITE_APP_IMG_API;
const isUpload = ref(false);
const active = ref(1);
const sponsorList = ref([]);
const aliPay = ref(BASE_IMG_URL + webInfo.aliPay);
const weiPay = ref(BASE_IMG_URL + webInfo.weixinPay);
const money = ref(0);
const uploadPayImage = (data) => {
  const {file} = data;
  const formData = new FormData();
  formData.append("file", file);
  uploadPayImg(money.value, formData).then(res => {
    if (res.code !== 200) {
      ElMessage.error(res.message);
      setTimeout(() => {
        router.go(0);
      }, 1000);
    } else {
      ElMessage.success(res.message);
      setTimeout(() => {
        router.go(0);
      }, 1500);
    }
  });
};
onMounted(() => {
  sponsor().then(res => {
    sponsorList.value = res.result;
  });
});
</script>

<template>
  <article>
    <div class="content">
      <el-card style="padding: 20px;" class="my-animation-hideToShow">
        <h2>赞助墙</h2>
        <div class="sponsor-tips">
          <div class="item">当前赞助用途</div>
          <div class="item">1.维护网站、域名</div>
          <div class="item">2.为以后升级博客筹钱</div>
          <div class="item">3.给博主的一点点幸苦费</div>
        </div>
        <div class="tips">
          <div class="item">请注意：</div>
          <div class="item">1.博主不会强迫任何人必须赞助！完全自愿。</div>
          <div class="item">2.请在上传支付截图前登录站点以此来绑定您的账号</div>
          <div class="item">
            3.在支付完后请
            <span class="upload-img" @click="isUpload = true">
              点击此处
              <!-- 上传支付截图 -->
              <el-dialog v-model="isUpload" title="上传支付截图" width="30%" center>
                <el-input style="margin-bottom: 10px" v-model="money" placeholder="输入支付的金额" clearable></el-input>
                <el-upload class="upload-demo" drag multiple
                           :http-request="uploadPayImage">
                  <el-icon class="el-icon--upload"><upload-filled/></el-icon>
                  <div class="el-upload__text">
                    <em>上传图片之前请先备注金额</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      jpg/png files with a size less than 500kb
                    </div>
                  </template>
                </el-upload>
              </el-dialog>
            </span>
            来发送你的支付截图
          </div>
        </div>
        <div class="sponsor">
          <div class="sponsor-btn">
            <button @click="active = 1" type="button" :class="active === 1?'active':''">微信</button>
            <button @click="active = 2" type="button" :class="active === 2?'active':''">支付宝</button>
          </div>
          <div class="sponsor-img">
            <div class="img-tips">
              请在支付前认真思考！！
              <br>
              目前仅支持右侧的二项支付方式
            </div>
            <div class="img-pay">
              <img v-if="active === 1" :src="weiPay" alt="">
              <img v-else :src="aliPay" alt="">
            </div>
          </div>
        </div>
        <div class="sponsorList">
          <h3>赞助名单</h3>
          <div>
            <ul>
              <li v-for="(item, index) in sponsorList" :key="index">
                <span class="index">{{ index + 1 }}</span>
                <div>
                  <img :src="BASE_IMG_URL + item.avatar" alt="">
                  <span>{{ item.nickname }}</span>
                </div>
                <span class="sponsor-item">
                  赞助了
                  <i>{{ item.money }}</i>
                  元
                </span>
                <span class="sponsor-item">
                  {{ item.create_datetime }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </el-card>
    </div>
  </article>
</template>

<style scoped lang="less">
article {
  padding: 60px 0 30px 0;
  width: 100%;
  height: 100%;
  background: var(--body-color);

  .content {
    margin: 20px auto 30px;
    width: 1200px;

    .sponsor-tips {
      margin-top: 15px;
      border: 1px solid var(--border-line);
      border-left: 5px solid var(--border-line);
      padding: 20px;
      width: auto;
      border-radius: 5px;
      background-color: #faebd7;

      .item {
        margin-bottom: 10px
      }
    }

    .tips {
      margin-top: 15px;
      padding: 10px 20px;
      background-color: var(--tips-backgroud-color);

      .item {
        margin-bottom: 10px;
      }

      .upload-img {
        color: var(--theme-color);
        cursor: pointer;
      }
    }

    .sponsor {
      margin-top: 15px;
      background-color: #f0f0f0;
      padding: 5px;
      border-radius: 5px;

      .sponsor-btn {
        button {
          padding: 20px;
          display: inline-block;
          cursor: pointer;
          border: none;

          &:hover {
            background-color: hsla(0, 2%, 76%, .7);
          }
        }

        .active {
          background-color: #fff;
          border-bottom: 2px solid #799ee4;
        }
      }

      .sponsor-img {
        background-color: var(--background-color);

        .img-tips {
          padding: 20px 20px;
          color: #6bcf84;
        }

        .img-pay {
          width: 500px;
          margin: 0 auto;

          img {
            width: 100%;
            text-align: center;
          }
        }
      }
    }

    .sponsorList {
      margin: 15px 0;

      ul {
        li {
          display: flex;
          align-items: center;
          width: fit-content;
          border-radius: 5px;
          padding: 5px 20px;
          background-color: #ebeef5;
          color: var(--text-color);
          margin: 0 auto 10px;

          .index {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: var(--theme-color);
            padding: 5px;
            text-align: center;
            line-height: 20px;
            margin-right: 20px;
            border-radius: 3px;
            color: #fff;
          }

          div {
            img {
              margin-right: 5px;
              vertical-align: middle;
              border-radius: 50%;
              width: 35px;
              height: 35px;
            }
          }

          .sponsor-item {
            margin-left: 50px;
            line-height: 20px;

            i {
              color: var(--theme-color);
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>